<template>
  <div id="workList">
    <router-link :to="{path:'/player',query:{list:this.list,clickIndex:this.clickIndex},}">
    <div class="item" 
    v-for="(item,index) in list" 
    :key="index"
    @click="click(item,index)"
    >
        <videos :videos="item"></videos>
        <div class="box">
          <span class="love iconfont">&#xe68b;</span>
          <span class="number"> {{item.loveNumber}}</span>
        </div>
    </div>
    </router-link>
  </div>
</template>

<script>
import videos from '../../first/components/video.vue'
import axios from 'axios'
export default {
  name: 'workList',
  components:{
    videos
  },
  data(){
    return{
      list:[],
      listName:this.$route.query.listName,
      clickIndex:''
    }
  },
  mounted() {
    this.getVideoList()
  },
  methods:{
    getVideoList(){
      axios.get('api/videos.json')
      .then(this.getVideoListSucc)
    },
    getVideoListSucc(res){
      if(this.listName === 'works'){
        this.list = res.data.list.slice(0,10)
      }else if(this.listName === 'follow'){
        this.list = res.data.list.slice(10,20)
      }else{
        this.list = res.data.list.slice(20,29)
      }
    },
    click(i,index){
      console.log(i,index)
      this.clickIndex = index
    }
    
  }

}
</script>

<style  scoped>

#workList{
  width: 100%;
  background-color: #000000;
  overflow: hidden;
  
}
#workList .item{
  width: 33%;
  height: 3rem;
  float: left;
  position: relative;
  margin-top: 0.06rem;
  z-index: 20;
}
#workList .item videos{
  width: 100%;
  height: 100%;
}
#workList .item .box{
  position: absolute;
  bottom: .1rem;
  left: .2rem;
}
#workList .item .box .love{
  font-size: .3rem;
  color: #FFFFFF;
}
#workList .item .box .number{
  font-size: .25rem;
  color: #FFFFFF;
}
</style>
